<template>
    <div class="app-container">
        <el-card shadow="never">
            <!-- 条件查询 -->
            <el-form v-show="showSearch" ref="queryForm" :model="queryParams" label-width="120px" @keyup.enter.native="submitSearch" @submit.native.prevent>
                <el-row>
                    <el-col :md="6" :sm="12">
                        <el-form-item label="需求方:" prop="user_id.value">
                            <SelectPage v-model="queryParams.user_id.value" :url="'/admin/user/selectPage'" show_field="nickname" show_id="uid" query_field="uid" :multiple="false" />
                        </el-form-item>
                    </el-col>
                    <el-col :md="6" :sm="12">
                        <el-form-item label="所属分类:" prop="category1.value">
                            <SelectCategory url="/admin/pz.category/tree"  placeholder="请输入所属分类"
                                            :check-strictly="true"
                                            :value="[queryParams.category1.value, queryParams.category2.value, queryParams.category3.value]"
                                            @change="onChangeCategory"></SelectCategory>
                        </el-form-item>
                    </el-col>
                    <el-col :md="6" :sm="12">
                        <el-form-item label="需求价格:" prop="money.value">
                            <el-row>
                                <el-col :span="11">
                                    <el-input v-model="startMoney" placeholder="需求价格" clearable @input="onInputMoney1" />
                                </el-col>
                                <el-col :span="2">
                                    <div style="text-align: center">-</div>
                                </el-col>
                                <el-col :span="11">
                                    <el-input v-model="endMoney" placeholder="需求价格" clearable @input="onInputMoney2" />
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                    <el-col :md="6" :sm="12">
                        <el-form-item label="状态:" prop="status.value">
                            <el-select v-model="queryParams.status.value" placeholder="请选择状态" clearable>
                                <el-option v-for="(item, index) in status" :key="index" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="6" :sm="12">
                        <el-form-item label="稿件状态:" prop="bids_status.value">
                            <el-select v-model="queryParams.bids_status.value" placeholder="请选择稿件状态" clearable>
                                <el-option v-for="(item, index) in bids_status" :key="index" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="6" :sm="12">
                        <el-form-item label="纠纷状态:" prop="dispute_status.value">
                            <el-select v-model="queryParams.dispute_status.value" placeholder="请选择纠纷状态" clearable>
                                <el-option v-for="(item, index) in dispute_status" :key="index" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <template v-if="searchExpand">
                            <el-col :md="6" :sm="12">
                        <el-form-item label="支付状态:" prop="pay_status.value">
                            <el-select v-model="queryParams.pay_status.value" placeholder="请选择支付状态" clearable>
                                <el-option v-for="(item, index) in pay_status" :key="index" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="6" :sm="12">
                        <el-form-item label="押金支付状态:" prop="deposit_status.value">
                            <el-select v-model="queryParams.deposit_status.value" placeholder="请选择押金支付状态" clearable>
                                <el-option v-for="(item, index) in deposit_status" :key="index" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    </template>
                    <el-col :md="6" :sm="12">
                        <el-form-item class="ele-text-right" label-width="50px">
                            <el-button type="primary" size="mini" @click="submitSearch" icon="el-icon-search" class="ele-btn-icon">搜索 </el-button>
                            <el-button @click="resetQuery" size="mini" icon="el-icon-refresh">重置</el-button>
                            <el-link @click="searchExpand = !searchExpand" type="primary" :underline="false" class="ml0">
                                <template v-if="searchExpand"> 收起<i class="el-icon-arrow-up"></i> </template>
                                <template v-else> 展开<i class="el-icon-arrow-down"></i> </template>
                            </el-link>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5" v-if="false">
                    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="open" v-hasPermi="api.add">添加</el-button>
                </el-col>
                <el-col :span="1.5" v-if="false">
                    <el-button type="danger" plain icon="el-icon-delete" size="mini"
                               :disabled="multiple" @click="handleDelete" v-hasPermi="api.delete">删除</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="warning" plain icon="el-icon-download" size="mini" v-loading="exportLoading" @click="handleExport" v-hasPermi="api.export">导出</el-button>
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="initIndex" :columns="columns" printId="#quickadmin"></right-toolbar>
            </el-row>

            <!-- 列表 -->
            <qa-table
                :source="tableData"
                :columns="columns"
                :selection="true"
                :loading="loading"
                @sortChange="sortChange"
                @statusChange="statusChange"
                @selectionChange="selectionChange"
                id="quickadmin"
            >
                <template v-slot:moreColumn>
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="稿件状态">
                                    <span>{{ props.row.bids_status_text }}</span>
                                </el-form-item>
                                <el-form-item label="纠纷状态">
                                    <span>{{ props.row.dispute_status_text }}</span>
                                    <el-button type="text" @click="handleDispute(props.row)" v-if="props.row.dispute_status === 2">[待处理]</el-button>
                                    <el-button type="text" @click="handleDispute(props.row)" v-if="props.row.dispute_status === 3">[已处理]</el-button>
                                </el-form-item>
                                <el-form-item label="服务时间">
                                    <span>{{ props.row.service_time || '--' }}</span>
                                </el-form-item>
                                <el-form-item label="服务完成时间">
                                    <span>{{ props.row.success_time || '--' }}</span>
                                </el-form-item>
                                <el-form-item label="创建时间">
                                    <span>{{ props.row.create_time }}</span>
                                </el-form-item>
                                <el-form-item label="更新时间">
                                    <span>{{ props.row.update_time }}</span>
                                </el-form-item>
                                <el-form-item label="支付状态">
                                    <span>{{ props.row.pay_status_text }}</span>
                                </el-form-item>
                                <el-form-item label="支付状态">
                                    <span>{{ props.row.pay_oid || '--' }}</span>
                                </el-form-item>
                                <el-form-item label="预约金支付状态">
                                    <span>{{ props.row.deposit_status_text }}</span>
                                </el-form-item>
                                <el-form-item label="预约金支付订单号">
                                    <span>{{ props.row.disposit_oid || '--' }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                </template>
                <template v-slot:action>
                    <el-table-column label="操作" width="180">
                        <template slot-scope="scope">
<!--                            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)" v-hasPermi="api.edit">编辑</el-button>-->
                            <el-button size="mini" type="text" icon="el-icon-tickets" @click="handleDetail(scope.row)" v-hasPermi="api.find">详情</el-button>
<!--                            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="api.delete">删除</el-button>-->
                            <el-button size="mini" type="text" icon="el-icon-s-order" @click="handleDraft(scope.row)" v-has-permi="api.bids">合作方</el-button>
                            <el-button size="mini" type="text" icon="el-icon-s-order" @click="handleLogs(scope.row)" v-has-permi="api.logs">日志</el-button>
                            <div>
                                <el-button size="mini" type="text" icon="el-icon-document-checked" @click="handleEvaluation(scope.row)"
                                           v-has-permi="api.evaluation">评价</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </template>
            </qa-table>
            <!-- 分页 -->
            <pagination :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="initIndex" />
        </el-card>
        <!-- 编辑弹窗 -->
       <el-dialog :title="!disabled ? ( findFormData[pk] ? '编辑' : '添加' ) : '详情'" :visible="editOpen" :before-close="beforeClose" destroy-on-close>
            <EditForm ref="editForm" :findFormData="findFormData" :disabled="disabled" @submitForm="submitForm" :editFormParams="editFormParams" @editFormCancel="beforeClose" />
        </el-dialog>
        <el-dialog title="合作方列表" :visible.sync="draftObj.visible"
                   class="dialog-no-pd"
                   width="60%" destroy-on-close append-to-body>
            <div style="height: 70vh;overflow-y: auto" v-if="draftObj.visible">
                <bidsList :queryObj="draftObj"></bidsList>
            </div>
        </el-dialog>
        <el-dialog title="需求日志" :visible.sync="logsObj.visible"
                   class="dialog-no-pd"
                   width="60%" destroy-on-close append-to-body>
            <div style="height: 70vh;overflow-y: auto" v-if="logsObj.visible">
                <logsList :queryObj="logsObj"></logsList>
            </div>
        </el-dialog>
        <el-dialog title="评价列表" :visible.sync="evaluationObj.visible"
                   class="dialog-no-pd"
                   width="60%" destroy-on-close append-to-body>
            <div style="height: 70vh;overflow-y: auto" v-if="evaluationObj.visible">
                <evaluationList :queryObj="evaluationObj"></evaluationList>
            </div>
        </el-dialog>
        <el-dialog title="争议处理" :visible.sync="disputeObj.visible"
                   class="dialog-no-pd"
                   width="60%" destroy-on-close append-to-body>
            <div style="height: 70vh;overflow-y: auto" v-if="disputeObj.visible">
                <disputeList :queryObj="disputeObj"></disputeList>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { curdMixin } from '@/mixins/curdMixin'
import EditForm from './EditFormCom'
import SelectCategory from "../../../components/My/SelectCategory";
import bidsList from '../task_bids/index'
import logsList from '../task_log/index'
import evaluationList from '../task_evaluation/index'
import disputeList from '../task_dispute/index'

export default {
    name: 'Curd',
    mixins: [curdMixin],
    components: { EditForm,SelectCategory, bidsList, logsList, evaluationList, disputeList },
    data() {
        return {
            // table结构
            columns: [
                {
                    visible: true,
                    label: '编号',
                    prop: 'id',
                    width: 55
                },
                {
                    visible: true,
                    label: '需求方',
                    prop: 'myUser.nickname',
                    width: 90,
                    overflow: true
                },
                {
                    visible: true,
                    label: '一级分类',
                    prop: 'category1_text',
                    width: 80,
                    overflow: true
                },
                {
                    visible: true,
                    label: '二级分类',
                    prop: 'category2_text',
                    width: 80,
                    overflow: true
                },
                {
                    visible: true,
                    label: '照片',
                    prop: 'images',
                    component:'QuickAdminImage',
                },
                {
                    visible: true,
                    label: '预约开始时间',
                    prop: 'make_start_time',
                    width: 120,
                    overflow: true
                },
                {
                    visible: true,
                    label: '预约结束时间',
                    prop: 'make_end_time',
                    width: 120,
                    overflow: true
                },
                {
                    visible: true,
                    label: '状态',
                    prop: 'status',
                    component:'QuickAdminTextColor',
                    width: 80,
                    overflow: true,
                    formatter: (prop, row) => {
                        let type = ''
                        switch (prop) {
                            case 1:
                                type = 'success'
                                break
                            case 2:
                                type = 'warning'
                                break
                            case 3:
                                type = 'info'
                                break
                            case 4:
                                type = 'primary'
                                break
                            case 5:
                                type = 'primary'
                                break
                            case 6:
                                type = 'primary'
                                break
                            case 8:
                                type = 'primary'
                                break

                        }
                        return {
                            value: prop,
                            type: type,
                            text: row.status_text,
                        }
                    },
                },
                {
                    visible: true,
                    label: '合作方',
                    prop: 'pzPartner.realname',
                },
                {
                    visible: true,
                    label: '需求价格',
                    prop: 'money',
                    width: 80,
                    overflow: true
                },
                {
                    visible: true,
                    label: '预约金',
                    prop: 'deposit_money',
                    width: 80,
                    overflow: true
                },
            ],
            // 接口地址
            api: {
                index: `/admin/pz.task2/index`,
                find: `/admin/pz.task2/find`,
                add: `/admin/pz.task2/add`,
                edit: `/admin/pz.task2/edit`,
                delete: `/admin/pz.task2/delete`,
                export: `/admin/pz.task2/export`,
                status: `/admin/pz.task2/status`,
                bids: `/admin/pz.task_bids/index`,
                logs: '/admin/pz.task_log/index',
                evaluation: '/admin/pz.task_evaluation/index',
            },
            editFormParams: {},
            // 搜索表单是否展开
            searchExpand: false,
            // 查询参数
            queryParams: {
                user_id: { value:undefined, op: '='},
                fuwu_id: { value:undefined, op: '='},
                category1: { value:undefined, op: '='},
                category2: { value:undefined, op: '='},
                category3: { value:undefined, op: '='},
                money: { value: [], op: 'range'},
                status: { value:undefined, op: '='},
                bids_status: { value:undefined, op: '='},
                dispute_status: { value:undefined, op: '='},
                pay_status: { value:undefined, op: '='},
                deposit_status: { value:undefined, op: '='},
            },
            status:[
               { label: "询价", value: 1 },
               { label: "可接单", value: 2 },
               { label: "待确认服务", value: 3 },
               { label: "服务进行中", value: 4 },
               { label: "服务已完成", value: 5 },
               { label: "已评价", value: 6 },
               { label: "已取消", value: 8 },
            ],
            bids_status:[
               { label: "选择合作方", value: 1 },
               { label: "已选合作方", value: 2 },
            ],
            dispute_status:[
               { label: "无纠纷", value: 1 },
               { label: "待处理", value: 2 },
               { label: "已处理", value: 3 },
            ],
            pay_status:[
               { label: "待支付", value: 1 },
               { label: "已支付", value: 2 },
               { label: "已退款", value: 3 },
            ],
            deposit_status:[
               { label: "待支付", value: 1 },
               { label: "已支付", value: 2 },
               { label: "已退款", value: 3 },
            ],
            startMoney: '',
            endMoney: '',
            draftObj: {
                visible: false,
                task_id: ''
            },
            logsObj: {
                visible: false,
                task_id: ''
            },
            evaluationObj: {
                visible: false,
                task_id: ''
            },
            disputeObj: {
                visible: false,
                task_id: ''
            }
        }
    },

    methods: {
        onChangeCategory(e) {
            if (e.length >= 3) this.$set(this.queryParams.category3, 'value', e[2])
            if (e.length >= 2) this.$set(this.queryParams.category2, 'value', e[1])
            if (e.length >= 1) this.$set(this.queryParams.category1, 'value', e[0])
        },
        onInputMoney1(e) {
            let arr = this.queryParams.money.value
            arr[0] = this.startMoney * 100
            this.$set(this.queryParams.money, 'value', arr)
        },
        onInputMoney2(e) {
            let arr = this.queryParams.money.value
            arr[1] = this.endMoney * 100
            this.$set(this.queryParams.money, 'value', arr)
        },
        handleDraft(row) {
            this.draftObj = {
                visible: true,
                task_id: row.id
            }
        },
        handleLogs(row) {
            this.logsObj = {
                visible: true,
                task_id: row.id
            }
        },
        handleEvaluation(row) {
            this.evaluationObj = {
                visible: true,
                task_id: row.id
            }
        },
        handleDispute(row) {
            this.disputeObj = {
                visible: true,
                task_id: row.id
            }
        }
    }
}
</script>
